<?php load_header(); ?>

<?php #content ?>

<header>
    
    <!--RevSlider-->
    <div class="tp-banner-container">
        <div class="tp-banner" >
            <ul>
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                    <!-- MAIN IMAGE -->
                    <?php echo img('public/img/transparent.png', 'alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"') ?>
                    <!-- LAYERS -->
                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption lfl fadeout hidden-xs"
                        data-x="left"
                        data-y="bottom"
                        data-hoffset="30"
                        data-voffset="0"
                        data-speed="500"
                        data-start="700"
                        data-easing="Power4.easeOut">
                        <?php echo img('public/img/slides/header-bg-blog-1349x400.jpg') ?>
                    </div>

                    <div class="tp-caption lfl fadeout visible-xs"
                        data-x="left"
                        data-y="center"
                        data-hoffset="700"
                        data-voffset="0"
                        data-speed="500"
                        data-start="700"
                        data-easing="Power4.easeOut">
                        <?php echo img('public/img/slides/header-bg-blog-1349x400.jpg') ?>
                    </div>

                    <div class="tp-caption large_white_bold sft" data-x="550" data-y="center" data-hoffset="0" data-voffset="-80" data-speed="500" data-start="1200" data-easing="Power4.easeOut">
                        Oleose
                    </div>
                    <div class="tp-caption large_white_light sfr" data-x="770" data-y="center" data-hoffset="0" data-voffset="-80" data-speed="500" data-start="1400" data-easing="Power4.easeOut">
                        App
                    </div>
                    <div class="tp-caption large_white_light sfb" data-x="550" data-y="center" data-hoffset="0" data-voffset="0" data-speed="1000" data-start="1500" data-easing="Power4.easeOut">
                        Landing Theme
                    </div>

                    <div class="tp-caption sfb hidden-xs" data-x="550" data-y="center" data-hoffset="0" data-voffset="85" data-speed="1000" data-start="1700" data-easing="Power4.easeOut">
                        <a href="#about" class="btn btn-primary inverse btn-lg">LEARN MORE</a>
                    </div>
                    <div class="tp-caption sfr hidden-xs" data-x="730" data-y="center" data-hoffset="0" data-voffset="85" data-speed="1500" data-start="1900" data-easing="Power4.easeOut">
                        <a href="#getApp" class="btn btn-default btn-lg">GET APP</a>
                    </div>

                </li>
                <!-- SLIDE 2 -->
                <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
                    <!-- MAIN IMAGE -->
                    <?php echo img('public/img/transparent.png', 'alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"') ?>
                    <!-- LAYERS -->
                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption lfb fadeout hidden-xs"
                        data-x="center"
                        data-y="bottom"
                        data-hoffset="0"
                        data-voffset="0"
                        data-speed="1000"
                        data-start="700"
                        data-easing="Power4.easeOut">
                        <?php echo img('public/img/slides/tables-wine-glasses-1349x400.jpg') ?>
                    </div>
                    
                    <div class="tp-caption large_white_light sft" data-x="center" data-y="250" data-hoffset="0" data-voffset="0" data-speed="1000" data-start="1400" data-easing="Power4.easeOut">
                        Every Pixel <i class="fa fa-heart"></i>
                    </div>
                    
                    
                </li>

                <!-- SLIDE 3 -->
                <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
                    <!-- MAIN IMAGE -->
                    <?php echo img('public/img/transparent.png', 'alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"') ?>
                    <!-- LAYERS -->
                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption customin customout hidden-xs"
                        data-x="right"
                        data-y="center"
                        data-hoffset="0"
                        data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;"
                    data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-voffset="50"
                        data-speed="1000"
                        data-start="700"
                        data-easing="Power4.easeOut">
                        <?php echo img('public/img/slides/weddingHero932.jpg') ?>
                    </div>

                    <div class="tp-caption customin customout visible-xs"
                        data-x="center"
                        data-y="center"
                        data-hoffset="0"
                        data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;"
                    data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-voffset="0"
                        data-speed="1000"
                        data-start="700"
                        data-easing="Power4.easeOut">
                        <?php echo img('public/img/berry/Slides/family-berry.png') ?>
                    </div>

                    <div class="tp-caption lfb visible-xs" data-x="center" data-y="center" data-hoffset="0" data-voffset="400" data-speed="1000" data-start="1200" data-easing="Power4.easeOut">
                        <a href="#" class="btn btn-primary inverse btn-lg">Purchase</a>
                    </div>

                    
                    <div class="tp-caption mediumlarge_light_white sfl hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="-50" data-speed="1000" data-start="1000" data-easing="Power4.easeOut">
                       Powerful Wedd
                    </div>
                    <div class="tp-caption mediumlarge_light_white sft hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="0" data-speed="1000" data-start="1200" data-easing="Power4.easeOut">
                       Living your dream
                    </div>
                    <div class="tp-caption small_light_white sfb hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="80" data-speed="1000" data-start="1600" data-easing="Power4.easeOut">
                       <p>Nulla pretium libero interdum, tempus lorem non, rutrum diam. <br> Quisque pellentesque diam sed pulvinar lobortis. Vestibulum ante <br>ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                    </div>

                    <div class="tp-caption lfl hidden-xs" data-x="left" data-y="center" data-hoffset="0" data-voffset="160" data-speed="1000" data-start="1800" data-easing="Power4.easeOut">
                        <a href="#" class="btn btn-primary inverse btn-lg">Purchase</a>
                    </div>
                    
                    
                </li>
                
            </ul>
        </div>
    </div>

</header>

<section id="about">
    <div class="container">
        
        <div class="section-heading scrollpoint sp-effect3">
            <h1>About Us</h1>
            <div class="divider"></div>
            <p>Oleose Beautiful App Landing Page</p>
        </div>

        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-6">
                <div class="about-item scrollpoint sp-effect2">
                    <i class="fa fa-download fa-2x"></i>
                    <h3>Easy setup</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6" >
                <div class="about-item scrollpoint sp-effect5">
                    <i class="fa fa-mobile fa-2x"></i>
                    <h3>On-the-go</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6" >
                <div class="about-item scrollpoint sp-effect5">
                    <i class="fa fa-users fa-2x"></i>
                    <h3>Social connect</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6" >
                <div class="about-item scrollpoint sp-effect1">
                    <i class="fa fa-sliders fa-2x"></i>
                    <h3>Dedicated support</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features">
    <div class="container">
        <div class="section-heading scrollpoint sp-effect3">
            <h1>Features</h1>
            <div class="divider"></div>
            <p>Learn more about this feature packed App</p>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 scrollpoint sp-effect1">
                <div class="media media-left feature">
                    <a class="pull-right" href="#">
                        <i class="fa fa-cogs fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">User Settings</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media media-left feature">
                    <a class="pull-right" href="#">
                        <i class="fa fa-envelope fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Messages Inbox</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media media-left feature">
                    <a class="pull-right" href="#">
                        <i class="fa fa-users fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Friends List</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media media-left feature">
                    <a class="pull-right" href="#">
                        <i class="fa fa-comments fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Live Chat Messages</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media media-left feature">
                    <a class="pull-right" href="#">
                        <i class="fa fa-calendar fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Calendar / Planner</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4" >
                <?php echo img('public/img/berry/iphone-berry.png', 'class="img-responsive scrollpoint sp-effect5"') ?>
            </div>
            <div class="col-md-4 col-sm-4 scrollpoint sp-effect2">
                <div class="media feature">
                    <a class="pull-left" href="#">
                        <i class="fa fa-map-marker fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">My Places</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media feature">
                    <a class="pull-left" href="#">
                        <i class="fa fa-film fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Media Player™</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media feature">
                    <a class="pull-left" href="#">
                        <i class="fa fa-compass fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Intuitive Statistics</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media feature">
                    <a class="pull-left" href="#">
                        <i class="fa fa-picture-o fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">Weather on-the-go</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
                <div class="media active feature">
                    <a class="pull-left" href="#">
                        <i class="fa fa-plus fa-2x"></i>
                    </a>
                    <div class="media-body">
                        <h3 class="media-heading">And much more!</h3>
                        Lorem ipsum dolor sit amet.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="reviews">
    <div class="container">
        <div class="section-heading inverse scrollpoint sp-effect3">
            <h1>Reviews</h1>
            <div class="divider"></div>
            <p>Read What's The People Are Saying About Us</p>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-push-1 scrollpoint sp-effect3">
                <div class="review-filtering">
                    <div class="review">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="review-person">
                                    <img src="http://api.randomuser.me/portraits/women/94.jpg" alt="" class="img-responsive">
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="review-comment">
                                    <h3>“I love Oleose, I highly recommend it, Everyone Try It Now”</h3>
                                    <p>
                                        - Krin Fox
                                        <span>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star-o fa-lg"></i>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="review rollitin">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="review-person">
                                    <img src="http://api.randomuser.me/portraits/men/70.jpg" alt="" class="img-responsive">
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="review-comment">
                                    <h3>“Oleaose Is The Best Stable, Fast App I Have Ever Experienced”</h3>
                                    <p>
                                        - Theodore Willis
                                        <span>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star-half-o fa-lg"></i>
                                            <i class="fa fa-star-o fa-lg"></i>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="review rollitin">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="review-person">
                                    <img src="http://api.randomuser.me/portraits/men/93.jpg" alt="" class="img-responsive">
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="review-comment">
                                    <h3>“Keep It Up Guys Your Work Rules, Cheers :)”</h3>
                                    <p>
                                        - Ricky Grant
                                        <span>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star fa-lg"></i>
                                            <i class="fa fa-star-half-o fa-lg"></i>
                                            <i class="fa fa-star-o fa-lg"></i>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="screens">
    <div class="container">

        <div class="section-heading scrollpoint sp-effect3">
            <h1>Screens</h1>
            <div class="divider"></div>
            <p>See what’s included in the App</p>
        </div>

        <div class="filter scrollpoint sp-effect3">
            <a href="javascript:void(0)" class="button js-filter-all active">All Screens</a>
            <a href="javascript:void(0)" class="button js-filter-one">User Access</a>
            <a href="javascript:void(0)" class="button js-filter-two">Social Network</a>
            <a href="javascript:void(0)" class="button js-filter-three">Media Players</a>
        </div>
        <div class="slider filtering scrollpoint sp-effect5" >
            <div class="one">
                <?php echo img('public/img/berry/screens/profile.jpg') ?>
                <h4>Profile Page</h4>
            </div>
            <div class="two">
                <?php echo img('public/img/berry/screens/menu.jpg') ?>
                <h4>Toggel Menu</h4>
            </div>
            <div class="three">
                <?php echo img('public/img/berry/screens/weather.jpg') ?>
                <h4>Weather Forcast</h4>
            </div>
            <div class="one">
                <?php echo img('public/img/berry/screens/signup.jpg') ?>
                <h4>Sign Up</h4>
            </div>
            <div class="one">
                <?php echo img('public/img/berry/screens/calendar.jpg') ?>
                <h4>Event Calendar</h4>
            </div>
            <div class="two">
                <?php echo img('public/img/berry/screens/options.jpg') ?>
                <h4>Some Options</h4>
            </div>
            <div class="three">
                <?php echo img('public/img/berry/screens/sales.jpg') ?>
                <h4>Sales Analysis</h4>
            </div>
        </div>
    </div>
</section>

<section id="demo">
    <div class="container">
        <div class="section-heading scrollpoint sp-effect3">
            <h1>Demo</h1>
            <div class="divider"></div>
            <p>Take a closer look in more detail</p>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2 scrollpoint sp-effect2">
                <div class="video-container" >
                    <iframe src="http://player.vimeo.com/video/70984663"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="getApp">
    <div class="container-fluid">
        <div class="section-heading inverse scrollpoint sp-effect3">
            <h1>Get App</h1>
            <div class="divider"></div>
            <p>Choose your native platform and get started!</p>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="hanging-phone scrollpoint sp-effect2 hidden-xs">
                    <?php echo img('public/img/berry/berry-angled2.png') ?>
                </div>
                <div class="platforms">
                    <a href="#" class="btn btn-primary inverse scrollpoint sp-effect1">
                        <i class="fa fa-android fa-3x pull-left"></i>
                        <span>Download for</span><br>
                        <b>Android</b>
                    </a>
                    
                        <a href="#" class="btn btn-primary inverse scrollpoint sp-effect2">
                            <i class="fa fa-apple fa-3x pull-left"></i>
                            <span>Download for</span><br>
                            <b>Apple IOS</b>
                        </a>
                </div>

            </div>
        </div>
    </div>
</section>

<form role="form" mechod="post" action="<?php echo base_url('user/perform_register');?>">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Your name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Your email">
                            </div>
                            <div class="form-group">
                                <textarea cols="30" rows="10" class="form-control" placeholder="Your message"></textarea>
                            </div>
                            <?php echo form_submit('submit', "submit")?>
                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                        </form>

<section id="contact_us" class="doublediagonal">

    <div class="container">
        <div class="section-heading scrollpoint sp-effect3">
            <h1>Support</h1>
            <div class="divider"></div>
            <p>For more info and support, contact us!</p>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-8 col-sm-8 scrollpoint sp-effect1">
                        <form role="form" mechod="post" action="<?php echo base_url('user/perform_register');?>">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Your name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Your email">
                            </div>
                            <div class="form-group">
                                <textarea cols="30" rows="10" class="form-control" placeholder="Your message"></textarea>
                            </div>
                            <?php echo form_submit('submit', "submit")?>
                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                        </form>
                    </div>
                    <div class="col-md-4 col-sm-4 contact-details scrollpoint sp-effect2">
                        <div class="media">
                            <a class="pull-left" href="#" >
                                <i class="fa fa-map-marker fa-2x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">4, Some street, California, USA</h4>
                            </div>
                        </div>
                        <div class="media">
                            <a class="pull-left" href="#" >
                                <i class="fa fa-envelope fa-2x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">
                                    <a href="mailto:support@oleose.com">support@oleose.com</a>
                                </h4>
                            </div>
                        </div>
                        <div class="media">
                            <a class="pull-left" href="#" >
                                <i class="fa fa-phone fa-2x"></i>
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">+1 234 567890</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php load_content_footer(); ?>

<?php #javascript for this page bellow ?>
<script>
	
</script>

<?php #this page is closed by this footter ?>
<?php load_footer(); ?>